<template>
  <div id="Index">
    <div class="main_wrapper">
      <sidebar/>
      <main>
        <keep-alive>
          <router-view/>
        </keep-alive>
      </main>
    </div>
    <foot/>
  </div>
</template>

<script>
import Sidebar from '@/components/layouts/Sidebar'
import Foot from '@/components/layouts/Foot'

export default {
  name: 'Index',
  components: {
    Sidebar,
    Foot
  }
}
</script>

<style scoped lang="scss">
  #Index {
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-flow: column;
    min-height: 100vh;
    .main_wrapper {
      flex: 1;
      display: -webkit-flex; /* Safari */
      display: flex;
      #Sidebar {
        width: 330px;
      }
      main {
        flex: 1;
        background: #eceff3;
      }
    }
  }
</style>
